const data=[
    {
        name:'question',
        value:17 
    },
    {
        name:'schools',
        value:25
    },
    {
        name:'philosopers',
        value:35
    },
]

const chartwidth = 400;
const chartheight=300;
const margin = 15;
const containerwidth=chartwidth+margin*2;
const containerheight=chartheight+margin*2;

const names=Array.from(data,(d)=>d.name)
const values=Array.from(data,d=>d.value)
const indices=Array.from(data,(d,i)=>i)

const step = chartwidth / names.length
const barwidth=step*0.8
const xs=Array.from(indices,i=>i*step)

const y=chartheight;
const vmax = Math.max(...values)
const barheights=Array.from(values,v=>chartheight*(v/vmax))

const nameColor={
    question:'#5b8ff9',
    philosopers:'#61ddaa',
    schools:'#657898'
}
const colors=Array.from(names,name=>nameColor[name])

const canvas=document.getElementById('canvas')
canvas.style.width=containerwidth+'px'
canvas.style.height=containerheight+'px'

canvas.width=containerwidth*2
canvas.height=containerheight*2

const context=canvas.getContext('2d')
context.scale(2,2)

context.translate(margin,margin)

for(let index of indices){
    console.log(index)
    const color=colors[index]
    const x=xs[index]
    const barheight=barheights[index] 
    const value=values[index]

    console.log(color,x,barheight,barwidth)

    context.fillStyle=color
    context.fillRect(x,y-barheight,barwidth,barheight)

    context.textAlign='center'
    context.textBaseline='middle'
    context.fillStyle='white'
    context.font='25px pingFangSC-Regular,sans-serif'
    context.fillText(value,x+barwidth/2,y-barheight/2)
}